import { Col, Row } from 'antd'
import { get } from 'lodash-es'

import { formatDate, formatDateTime, formatMoneyNum } from '@/utils/displayHelper'

/**
 * @typedef {Object} ViewFormItemProps
 * @property {import('./index').FormDataProps} [item] 组件属性
 */

/**
 * 展示组件
 * @param {ViewFormItemProps} param0
 * @returns
 */
const ViewFormItem = ({ label, labelCol, wrapperCol, style, detail, item }) => {
  const { viewRender, field, viewField } = item
  const { isDate, isDateTime, isMoney } = item
  let text = get(detail, viewField || field)
  let content = text
  if (isDate) {
    content = formatDate(text)
  }
  if (isDateTime) {
    content = formatDateTime(text)
  }
  if (isMoney) {
    content = <div className='c-money text-right'>{formatMoneyNum(text)}</div>
  }
  if (item.enum) {
    content = <span style={{ color: item.enum.get(text, 'color') }}>{item.enum.getText(text)}</span>
  }
  if (viewRender) {
    content = viewRender(text, detail)
  }
  return (
    <Row className='ant-form-item' style={style}>
      {labelCol && (
        <Col {...labelCol} className='ant-form-item-label'>
          <label>{label}</label>
        </Col>
      )}
      <Col {...wrapperCol} className='ant-form-item-control' style={{ display: 'flex', lineHeight: '32px' }}>
        <div className='flex-items-center flex' style={{ lineHeight: 'unset' }}>
          {content || content === 0 ? content : '-'}
        </div>
      </Col>
    </Row>
  )
}

export default ViewFormItem
